<template>
  <div class="dialog-overlay" v-if="show" @click="closeDialog">
    <div class="dialog-content" @click.stop>
      <div class="dialog-header">
        <h2>{{ title }}</h2>
        <button class="close-btn" @click="closeDialog">
          <font-awesome-icon icon="times" />
        </button>
      </div>

      <!-- 保洁服务预约表单 -->
      <div v-if="type === 'cleaning'" class="dialog-body">
        <div class="form-group">
          <label>预约日期</label>
          <input type="date" v-model="formData.date" class="form-input" :min="minDate">
        </div>
        <div class="form-group">
          <label>预约时间</label>
          <input type="time" v-model="formData.time" class="form-input">
        </div>
        <div class="form-group">
          <label>服务时长</label>
          <select v-model="formData.duration" class="form-input">
            <option value="2">2小时</option>
            <option value="3">3小时</option>
            <option value="4">4小时</option>
          </select>
        </div>
        <div class="form-group">
          <label>特殊要求</label>
          <textarea v-model="formData.requirements" class="form-input" rows="3" placeholder="请输入特殊要求（选填）"></textarea>
        </div>
      </div>

      <!-- 送餐服务预约表单 -->
      <div v-if="type === 'meal'" class="dialog-body">
        <div class="form-group">
          <label>预约日期</label>
          <input type="date" v-model="formData.date" class="form-input" :min="minDate">
        </div>
        <div class="form-group">
          <label>送餐时间</label>
          <input type="time" v-model="formData.time" class="form-input">
        </div>
        <div class="form-group">
          <label>餐食选择</label>
          <div class="meal-options">
            <div 
              v-for="meal in mealOptions" 
              :key="meal.id"
              class="meal-option"
              :class="{ active: formData.mealId === meal.id }"
              @click="selectMeal(meal.id)"
            >
              <img :src="meal.image" :alt="meal.name">
              <div class="meal-info">
                <h3>{{ meal.name }}</h3>
                <p>{{ meal.description }}</p>
                <span class="meal-price">¥{{ meal.price }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label>备注</label>
          <textarea v-model="formData.note" class="form-input" rows="2" placeholder="有什么特殊要求请在这里说明"></textarea>
        </div>
      </div>

      <!-- 代购服务预约表单 -->
      <div v-if="type === 'shopping'" class="dialog-body">
        <div class="form-group">
          <label>预约日期</label>
          <input type="date" v-model="formData.date" class="form-input" :min="minDate">
        </div>
        <div class="form-group">
          <label>期望送达时间</label>
          <input type="time" v-model="formData.time" class="form-input">
        </div>
        <div class="form-group">
          <label>购物清单</label>
          <div class="shopping-list">
            <div v-for="(item, index) in formData.items" :key="index" class="shopping-item">
              <input 
                type="text" 
                v-model="item.name" 
                class="form-input" 
                placeholder="物品名称"
              >
              <input 
                type="number" 
                v-model="item.quantity" 
                class="form-input" 
                placeholder="数量"
                min="1"
              >
              <button class="remove-btn" @click="removeItem(index)">
                <font-awesome-icon icon="trash" />
              </button>
            </div>
            <button class="add-btn" @click="addItem">
              <font-awesome-icon icon="plus" /> 添加物品
            </button>
          </div>
        </div>
        <div class="form-group">
          <label>备注说明</label>
          <textarea v-model="formData.note" class="form-input" rows="2" placeholder="请详细描述物品的具体要求，如品牌、规格等"></textarea>
        </div>
      </div>

      <div class="dialog-footer">
        <button class="cancel-btn" @click="closeDialog">取消</button>
        <button class="submit-btn" @click="submitAppointment">确认预约</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AppointmentDialog',
  props: {
    show: {
      type: Boolean,
      required: true
    },
    type: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      formData: {
        date: '',
        time: '',
        duration: '2',
        requirements: '',
        mealId: null,
        note: '',
        items: [{ name: '', quantity: 1 }]
      },
      mealOptions: [
        {
          id: 1,
          name: '营养套餐A',
          description: '荤素搭配，清淡可口',
          price: 25,
          image: '/images/meal-a.jpg'
        },
        {
          id: 2,
          name: '营养套餐B',
          description: '低盐低脂，健康美味',
          price: 28,
          image: '/images/meal-b.jpg'
        },
        {
          id: 3,
          name: '营养套餐C',
          description: '专为糖尿病人定制',
          price: 30,
          image: '/images/meal-c.jpg'
        }
      ]
    }
  },
  computed: {
    minDate() {
      const today = new Date();
      return today.toISOString().split('T')[0];
    }
  },
  methods: {
    closeDialog() {
      this.$emit('close');
      this.resetForm();
    },
    addItem() {
      this.formData.items.push({ name: '', quantity: 1 });
    },
    removeItem(index) {
      // 如果只剩一项，则不删除而是清空
      if (this.formData.items.length === 1) {
        this.formData.items[0] = { name: '', quantity: 1 };
        return;
      }
      // 删除指定索引的项
      this.formData.items.splice(index, 1);
    },
    submitAppointment() {
      // 这里添加表单验证逻辑
      if (!this.formData.date || !this.formData.time) {
        alert('请选择预约日期和时间');
        return;
      }

      if (this.type === 'meal' && !this.formData.mealId) {
        alert('请选择餐食');
        return;
      }

      if (this.type === 'shopping') {
        const invalidItems = this.formData.items.some(item => !item.name || !item.quantity);
        if (invalidItems) {
          alert('请完整填写购物清单');
          return;
        }
      }

      // 提交预约信息
      this.$emit('submit', {
        type: this.type,
        ...this.formData
      });
      
      // 关闭弹窗并重置表单
      this.closeDialog();
    },
    resetForm() {
      this.formData = {
        date: '',
        time: '',
        duration: '2',
        requirements: '',
        mealId: null,
        note: '',
        items: [{ name: '', quantity: 1 }]
      };
    },
    selectMeal(id) {
      this.formData.mealId = id;
    }
  }
}
</script>

<style scoped>
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.dialog-content {
  background: white;
  border-radius: 16px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.dialog-header {
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialog-header h2 {
  margin: 0;
  color: #2c3e50;
  font-size: 24px;
}

.close-btn {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  font-size: 20px;
  padding: 5px;
}

.close-btn:hover {
  color: #333;
}

.dialog-body {
  padding: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #2c3e50;
  font-weight: 500;
}

.form-input {
  width: 100%;
  padding: 10px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.3s ease;
}

.form-input:focus {
  border-color: #3498db;
  outline: none;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23333'%3E%3Cpath d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

.meal-options {
  display: grid;
  gap: 15px;
  margin-top: 10px;
}

.meal-option {
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 15px;
  display: flex;
  gap: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.meal-option:hover {
  border-color: #3498db;
}

.meal-option.active {
  border-color: #3498db;
  background: #f8f9fa;
}

.meal-option img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
}

.meal-info {
  flex: 1;
}

.meal-info h3 {
  margin: 0 0 5px;
  color: #2c3e50;
  font-size: 18px;
}

.meal-info p {
  margin: 0 0 10px;
  color: #666;
  font-size: 14px;
}

.meal-price {
  color: #e74c3c;
  font-weight: 600;
  font-size: 16px;
}

.shopping-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shopping-item {
  display: flex;
  gap: 10px;
  align-items: center;
}

.shopping-item .form-input {
  margin: 0;
}

.shopping-item input[type="text"] {
  flex: 2;
}

.shopping-item input[type="number"] {
  flex: 1;
  min-width: 80px;
}

.remove-btn {
  background: none;
  border: none;
  color: #e74c3c;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.remove-btn:hover {
  background-color: #fde8e7;
  color: #c0392b;
}

.add-btn {
  background: none;
  border: 2px dashed #3498db;
  color: #3498db;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 10px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.add-btn:hover {
  background-color: #ebf5fb;
}

.dialog-footer {
  padding: 20px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.cancel-btn,
.submit-btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-btn {
  background: white;
  border: 2px solid #e0e0e0;
  color: #666;
}

.cancel-btn:hover {
  background: #f8f9fa;
}

.submit-btn {
  background: #3498db;
  border: none;
  color: white;
}

.submit-btn:hover {
  background: #2980b9;
}

@media (max-width: 768px) {
  .dialog-content {
    width: 95%;
    margin: 10px;
  }

  .meal-option {
    flex-direction: column;
    text-align: center;
  }

  .meal-option img {
    width: 100%;
    height: 160px;
  }

  .shopping-item {
    flex-direction: column;
  }

  .shopping-item input[type="number"] {
    max-width: 100%;
  }
}
</style> 